<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL6QpaR0pLh8mcBEmcn4eb79hMYF5MXTrEeJsT7J6T7P9TRD7El==@7aMhs7F4s54ecLYLQpaB7T7h95MpsccQpMEMFp79W9pRs5qRp9cWphcraC0pFslFAV="></script>
    <script type="text/javascript">
		var maplet = null;
		var marker = null;
		function initMap() {
			maplet = new Maplet("mapbar");
			maplet.centerAndZoom(new MPoint(120.11639,30.28891), 10);
            maplet.showOverview(true,false);
			maplet.addControl(new MStandardControl());
            maplet.customInfoWindow = true;

            marker = new MMarker(
                    new MPoint(120.11639,30.28891),
                    new MIcon("http://i1.dpfile.com/s/img/map/marker.png", 20, 34),
                    new MInfoWindow("test", document.getElementById("cusIw"))
                    );

			maplet.addOverlay(marker);

            MEvent.addListener(marker, "iw_beforeopen", showCustomIw);
		}

        function showCustomIw(overlay,x,y) {
            var options = {
                pin: true,
                zindex: 5,
                content: overlay.info.content,
                location: {type:"xy",x:x,y:y},
                zoomhide: true
            };
            p = new MPanel(options);
            MPanel.enableDragMap(p.dom,true);
            maplet.addPanel(p);
        }
	</script>
    <style>
    	#13340521752164283{ top:-5px;}
    </style>
</head>

<body onload="initMap()">
<div id="mapbar" style=" width:250px; height:250px;"></div>
</body>
</html>
